Redirection of products through Metafield

Solved
Highlighted
New Member
9 0 0

Hello all,

 

I want to redirect some of the products on my shop to external websites when not sold directly on the shop (see example below).

And I want to do it within the collection pages, so that the shop features the image of the product, but clicking on it would redirect automatically towards the redirection link.

guilhem_0-1602610212954.png

 

 

Somebody gave me the advice to add a metafield description for each product and then modify the code of the collection page to :
* Redirect to the link when metafield is not empty

* Direct to classic product page when metafield is empty

 

Would someone know what would be the code to do that?

 

Thank you,

0 Likes
Highlighted
Shopify Expert
10031 116 1818

Each theme is going to have different code in place for the collection pages - especially if you've customised the code already.

Where are you stuck? At a high level you'd be using Liquid to determine if the product is available or not. If it is, keep the default link in place. If it's not don't use that link and instead use the value pulled from the metafield.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
9 0 0

Hello @Jason ,

 

Thank you for your answer!

I am using the Brooklyn theme but I haven't done any modification on the code yet.

For now, I just added the Metafield app but I have no clue on how to code 'if the product is available, keep the default link, else redirect to the metafield value'... So I am looking for someone to help me on this part.

For instance, can I do it with a Product with following Metafields :
Key = Redirection
Description = www.example.com

A condition that would do:
For product in collection
If key =/= empty
Then url used = www.example.com
Else url used = default link

 

But I don't even know if it is feasible or how to do it.

 

0 Likes
Highlighted
Shopify Expert
498 9 96

This is an accepted solution.

Open the theme code editor and find the 'product-grid-item.liquid' snippet. Look for the link (<a class="grid-product__image-link...) and replace the href="..." part with this:

{% if product.metafields.globa.Redirection != blank %}
   href="{{ product.metafields.global.Redirection }}" rel="noopener"
{% else %}
   href="{{ product.url | within: collection }}" 
{% endif %}

 (assuming your metafield namespace is 'global')

0 Likes
Highlighted
New Member
9 0 0

Hello @gina-gregory ,

 

This worked perfectly for the redirection thank you, this is exactly what I have been looking for!

But now, the products featured in the collection appear quite badly (see photo attached)

The old product image is under some kind of white filter and and useless part has been added on top of it.

Picture1.png

 

Do you know why I have such a result?

Here is the piece of code from the product grid item :

 

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      
      
      
      
      
      
      
      <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" 
         
         {%comment%}
         New code
         {%endcomment%}
         
         {% if product.metafields.Redirection.Redirectionlink != blank %}
   href="{{ product.metafields.Redirection.Redirectionlink }}" rel="noopener"
{% else %}
   href="{{ product.url | within: collection }}" 
{% endif %}
         
                 {%comment%}
         Old code
         
         href="{{ product.url | within: collection }}" data-image-link>
         
         {%endcomment%} 

        
        
        
        
        
        {% if featured_image.src== blank %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}
          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
            </div>
          </div>
          <noscript>
            <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
          </noscript>
        {% endif %}
      </a>
      {% if sold_out %}
        <div class="grid-product__sold-out">
          <p>{{ 'products.product.sold_out_html' | t }}</p>
        </div>
      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>
      {% endif %}
    </div>

 

Again thank you for the frst part, it worked perfectly!

0 Likes
Highlighted
Shopify Expert
498 9 96

You commented out some code that needs to stay in ( data-image-link> ).

Change to this:

{%comment%}
  Old code
  href="{{ product.url | within: collection }}"
{%endcomment%} 

data-image-link>

 

0 Likes
Highlighted
New Member
9 0 0

It worked like a charm!

Thank you again!

0 Likes