New project issues

Hi, getting a ton of issues switching a store to Liquify:

price with unit prices missing on product page
product images missing in nav (see "mega menu" thread)
li-snippet not working as assumed on faq and cta sections
search results says "no results found"

I can figure out the other issues myself 😉

https://preview.webflow.com/preview/huasna3?utm_medium=preview_link&utm_source=designer&utm_content=huasna3&preview=2e903db79948c9938579805d4b825151&locale=en&workflow=preview

34 comments

JJan

Hey @Seth, let me try to help you out:

We currently don't support unit prices with li-js-object, because it's not stored there. For now, you can just use li-object="product.selected_or_first_available_variant.unit_price | money". But if you want to switch the unit price when switching the variant, you would need to use the Section Rendering API

You're looping over the "child_link", so you would need to set it up like this: On the image wrapper you put a li-if="child_link.type == 'product_link'" and on the image li-object:src="child_link.object.featured_image | img_url: 'small'" and optionally li-object:alt="child_link.object.featured_image.alt"

Snippets don't store the settings data, that's done by the section. The snippet only stores the code, so it works a bit different than a Webflow component for example. In your case it would probably make most sense to use a metaobject for the faq and all other sections that have repetitive content.

We updated the search page because there were some old and false attributes. Can you compare the new template with you setup again? I saw for example, that the items have a li-for="product in collection.products", but it would need to be a li-for="product in search.results" on the search page. Same goes for pagination, filter, sort and the "no results" div. I would recommend to go over all the divs in that section and compare the attributes.

Let me know if you need further assistance :)

SSeth

@Jan Can I build my own "unit price" with metafields and math, like li-js-price="product.price | divided_by: variant.metafields.custom.square_feet | money" ?

jjonas.halbstark

hi @Seth, li-js- elements are not liquid. Thats why you cant use liquid filters. But what you want to do is possible but more advanced. Metafields are not part of the product json, thats why we need to store it somehwere else.

First you need to loop over all variants:

<div li-for="variants in products.variants">
<div li-js-if="selected_or_first_available_variant.id == {{ variant.id }}"</div>
<div li-object="variant.metafields.custom.square_feet" x-ref="variantDiv_{{ variant.id }}" x-effect="if ($refs['variantDiv_' + '{{ variant.id }}']) updateText($refs['variantDiv_' + '{{ variant.id }}'])">
</div>
</div>
</div>

jjonas.halbstark

not ready yet 😉

jjonas.halbstark

and the you need to open a new alpine store on a element which wrapps the variant loop and the element whre you want to use your calculated unit price:

<div class"wrapping-element" x-data="{ squareFeet: '{{ product.selected_or_first_available_variant.metafields.custom.squarefeet }}', updateText(ref) { this.variantTitle = ref.innerText;}}">
</div>

jjonas.halbstark

and now you can use the variable inside like you where tryning in the beginning:
<div li-js-price="selected_or_first_available_variant.price / squareFeet"></div>

I would also hide the variants loop element

jjonas.halbstark

so we created a variable squareFeet and a function which checks everytime the variant changes (real time update) and updates the variable

SSeth

Thanks! displaying price, compare at price, unit price, etc dynamically or even inside variant buttons is a bit messy 😅

jjonas.halbstark

Compare at price and price are part of the the product json per default. Thats why you can access it very easy. But the unit price and also metafields are not

SSeth

It is returning as $Infinity USD

jjonas.halbstark

can you send me a dev link?

jjonas.halbstark

i get redirected to this page: https://huasna.com/
When you are inside the theme prefien there sgould be a button "share"

jjonas.halbstark

Attachment

Bildschirmfoto_2024-10-14_um_23.06.43.png

SSeth

https://zion5pqqpadv4kg2-72873476400.shopifypreview.com

jjonas.halbstark

can you remove the | devide_by... from li-js-price (first image)
and also | money from the li-js-price object (second Image)

Attachments

Bildschirmfoto_2024-10-14_um_23.19.30.png

Bildschirmfoto_2024-10-14_um_23.20.17.png

jjonas.halbstark

when you copied my code here i think there is a mistake.. it should be {{ product.selected_or_first_available_variant.metafields.custom.square_feet }}

jjonas.halbstark

the _ was missing

jjonas.halbstark

can you update this and then i can check again

jjonas.halbstark

SSeth

Sorry about that, was testing some things

jjonas.halbstark

no worries 🙂

jjonas.halbstark

I will check it tomorrow 🙂 going to sleep now.

SSeth

Good night, thanks! I put it in a hidden div for now.

jjonas.halbstark

Hi @Seth, the preview link has expired now. Can you send a new one?

SSeth

Hey @jonas.halbstark, here you go: https://njt6fdzb3zlz3p8o-72873476400.shopifypreview.com

SSeth

I think the issue is the metafields aren't updating on new variant selection. https://huasna.com/products/rustic-reclaimed-barnwood

Attachment

jjonas.halbstark

Sorry seth.. but the link expired again 😦

jjonas.halbstark

but acessing metafields cant be done like: product.selected_or_first_available_variant....
You need to create a new alpine variable like described above

SSeth

It's live now @ huasna.com. Just brought it up because we had this functionality in Smootify, so I assumed it was simple.

jjonas.halbstark

Hi @Seth, you could use the section rendering api for this also. Maybe thats easier to access metafields.

Put this in the befor </body> tag:

<script>const setActiveRadios = () => {
        const variantSelectors = document.querySelectorAll(
          '[li-element="product-option-loop"]'
        );
        variantSelectors.forEach((selector) => {
          const div = selector.querySelector("div");
          const input = selector.querySelector("input");
          if (input.hasAttribute("checked") && div) {
            div.classList.add("w--redirected-checked");
          } else {
            div.classList.remove("w--redirected-checked");
          }
        });
      }
      const renderSection = (variantId, sectionSelector) => {
        const sectionElement = document.querySelector(

#shopify-section-${sectionSelector}

);
        if (sectionElement) {
          const sectionId =

${sectionSelector}

;
          fetch(

${window.location.pathname}?section_id=${sectionId}&variant=${variantId}

)
            .then((response) => response.text())
            .then((html) => {
              const newDocument = new DOMParser().parseFromString(html, "text/html");
              const newSection = newDocument.querySelector(

#shopify-section-${sectionId}

);
              const currentSection = document.querySelector(

#shopify-section-${sectionId}

);
              if (currentSection && newSection) {
                currentSection.innerHTML = newSection.innerHTML;
              }
            })
            .then(() => setActiveRadios())

jjonas.halbstark

        .then(() => {
              $(".swiper-container").each(function(index) {
                const thumbsSwiper = new Swiper($(this).find(".swiper.is-product-thumbnail")[0], {
                  slidesPerView: "auto",
                  rewind: false,
                  loopedSlides: 8,
                  slideToClickedSlide: true,
                  spaceBetween: 8,
                  direction: "horizontal",
                });
                const gallerySwiper = new Swiper($(this).find(".swiper.is-product-gallery")[0], {
                  mousewheel: {
                    forceToAxis: true,
                  },
                  spaceBetween: 16,
                  direction: "horizontal",
                  slidesPerView: 1,
                  thumbs: {
                    swiper: thumbsSwiper,
                    slideThumbActiveClass: "is-active",
                  },
                  keyboard: {
                    enabled: true,
                    onlyInViewport: true,
                  },
                });
              });
            })
            .catch((error) => console.error("Error fetching section:", error));
        }
      };
      document.addEventListener("DOMContentLoaded", () => {
        setActiveRadios();
      });
    </script>

And then add this alpine js attribute somewhere inside the product-variant-container:

x-init="$watch('selected_product_id', value => renderSection(value, '{{ section.id }}'))" data-section-id="{{ section.id }}"

With that we fetch the section every time the variant changes. Now you can use li-object everywhere to display your metaobjects.

https://shopify.dev/docs/api/ajax/section-rendering

jjonas.halbstark

In the code you also find a swiper code to reinitialize the slider.. if you are not using it, you can delete it

jjonas.halbstark

we are currenty working on implementing the section rendering api on an attribute basis

SSeth

Thanks!

Add a reply

Welcome to the Liquify Community

New project issues