Add Saved Projects Functionality
How to implement the saved projects page for Shopify.
Create the Pixfizz Products API page
Add a new template under the theme code edit page. Name it page.pixfizz-product-api.liquid
Copy the below code to this page
{% layout none %}
{
{%- comment %}
On sites with many non-pixfizz products, it makes sense from a performance perspective
to use a dedicated collections for pixfizz products, to be able to iterate only through them
instead of through all live products with `collections.all`.
{%- endcomment %}
{% paginate collections.all.products by 50 %}
{% for product in collections.all.products %}
"{{ product.id }}": {
"handle": {{ product.handle | json }},
"title": {{ product.title | json }},
"integration_type": {{ product.metafields.pixfizz.integration_type | json }},
"pixfizz_sku_map": {
{%- for variant in product.variants -%}
"{{ variant.id }}": {{ variant.metafields.pixfizz.product_sku | default: product.metafields.pixfizz.product_sku | json }}
{% unless forloop.last %},{% endunless %}{%- endfor -%}
},
"pixfizz_addons_map": {
{%- for variant in product.variants -%}
"{{ variant.id }}": {
"page_addon": {{ variant.metafields.pixfizz.page_addon_product.value.id | default: product.metafields.pixfizz.page_addon_product.value.id | json }},
"option_addons": {
{%- for addon in product.metafields.pixfizz.option_addon_products.value -%}
{{ addon.metafields.pixfizz.option_type_code | json }}: {
{%- for addon_variant in addon.variants -%}
{{ addon_variant.metafields.pixfizz.option_value_code | json }}: {{ addon_variant.id | json }}
{% capture variant_addons %}
{%- for addon in variant.metafields.pixfizz.option_addon_products.value -%}
{%- for addon_variant in addon.variants -%}
{{ addon_variant.metafields.pixfizz.option_value_code | json }}: {{ addon_variant.id | json }}
{% unless forloop.last %},{% endunless %}{%- endfor -%}
{%- endfor -%}
{% endcapture %}
{% assign variant_addons_stripped = variant_addons | strip %}
{% unless forloop.last and variant_addons_stripped == blank %},{% endunless %}{%- endfor -%}
{{ variant_addons }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endpaginate %}
}Create a Snippet
Create a snippet named pixfizz-saved-projects.liquid snippet in Shopify. Add the following code. The snippet was created to work with the Dawn theme and might have to be adapted to look good on other themes!
Add the snippet to the Shopify account page
Locate the Shopify template/section that renders the default account page. For Dawn it’s the main-account.liquid section. Plug the snippet into the most appropriate place (see below code showing an example of Dawn theme)
Create a Shopify Page
Create a new Page in the Shopify CMS (under “Online Store → Pages”). Give it the title “Pixfizz Product API” and select the “pixfizz-proudct-api” theme template for it.
Enable the save button in Editor
Go to your Pixfizz account and select "Settings" - "Design Tool"
Go to editor configuration and set the “Account Page Name” setting to “../account”. This will make the save button in shopify mode show up and direct the user to Shopify’s default /account page.
NOTE: We recommend incorporating the help guide to advise customers on how they can save their projects
Last updated