Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

product fetch url is returning data for some example product and not the actual product #31

Open
msachdev0307 opened this issue Mar 22, 2022 · 3 comments

Comments

@msachdev0307
Copy link

when the data is to be displayed in the wishlist page '/product/handle?view=card; fetch url is returning data for some example product and not the actual product

image

@msachdev0307 msachdev0307 changed the title /product/handle?view=card fetch url is returning data for some example product and not the actual product product fetch url is returning data for some example product and not the actual product Mar 22, 2022
@dlerm
Copy link
Owner

dlerm commented Apr 5, 2022

@msachdev0307 Can you post the content of you product-card snippet? There may be some hard coded values in there.

@msachdev0307
Copy link
Author

@dlerm

PFB the content for card-product.liquid. Also one thing to note is the regular price and sale price details are correct as per the values in my db. But the value for product title, url images are incorrect.

{% comment %}
Renders a product card

Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}

{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}
{{ card_product.featured_media.alt | escape }}
          {%- if card_product.media[1] != nil and show_secondary_image -%}
            <img
              srcset="{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
                {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
                {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
                {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
                {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
                {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
                {{ card_product.media[1] | img_url: 'master' }} {{ card_product.media[1].width }}w"
              src="{{ card_product.media[1] | img_url: '533x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
              alt="{{ card_product.media[1].alt | escape }}"
              class="motion-reduce"
              loading="lazy"
              width="{{ card_product.media[1].width }}"
              height="{{ card_product.media[1].height }}"
            >
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}
    <div class="card__content">
      <div class="card__information">
        <h3 class="card__heading">
          <a href="{{ card_product.url | default: '#' }}" class="full-unstyled-link">
            {{ card_product.title | escape }}
          </a>
        </h3>
      </div>
      <div class="card__badge {{ settings.badge_position }}">
        {%- if card_product.available == false -%}
          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
        {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
        {%- endif -%}
      </div>
    </div>
  </div>
  <div class="card__content">
    <div class="card__information">
      <h3 class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}">
        <a href="{{ card_product.url | default: '#' }}" class="full-unstyled-link">
          {{ card_product.title | escape }}
        </a>
      </h3>
      <div class="card-information">
        {%- if show_vendor -%}
          <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
          <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
        {%- endif -%}

        <span class="caption-large light">{{ block.settings.description | escape }}</span>

        {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
          {% liquid
            assign rating_decimal = 0
            assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
            if decimal >= 0.3 and decimal <= 0.7
              assign rating_decimal = 0.5
            elsif decimal > 0.7
              assign rating_decimal = 1
            endif
          %}
          <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}">
            <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
          </div>
          <p class="rating-text caption">
            <span aria-hidden="true">{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}</span>
          </p>
          <p class="rating-count caption">
            <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
            <span class="visually-hidden">{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
          </p>
        {%- endif -%}

        {% render 'price', product: card_product, price_class: '' %}
      </div>
    </div>
    <div class="card__badge {{ settings.badge_position }}">
      {%- if card_product.available == false -%}
        <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
      {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
        <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
      {%- endif -%}
    </div>

  </div>
</div>
{%- else -%}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price' %}
    </div>
  </div>
</div>

{%- endif -%}
{%- if card_product.handle != blank -%}

<style scoped> .icon { fill: transparent; stroke: #000000; transition: fill 0.3s ease; }
  .active .icon {
    fill: red;
    stroke: #000000;
  }
</style>
{%- render 'icon-heart' -%}
{%- endif -%}

@dlerm
Copy link
Owner

dlerm commented Jul 12, 2023

@msachdev0307 I think the issues is that we are passing the product data into the snippet incrrectly.

Your snippet requires the product variable to be named card_product (instead of just product).

In the section product-card-template, change the snippet to be called like this:

{% render 'card-product', card_product: product %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants