Updating Wishlist App- MyMedi

We regret to announce that the Wishlist Compare Plus app will be terminated from August 15, 2024 (GMT+7) due to it is no longer compatible with Shopify's updates.

To ensure a smooth transition, we recommend switching to our new app -  SWishlist: Simple Wishlist app, which we believe is a more efficient solution for your needs. Please note that SWishlist: Simple Wishlist app includes only the wishlist function and does not have the compare function.

Below is the detailed information regarding the updating of the wishlist app on MyMedi theme:

• Version 1.4: We have added the code to the theme, you just need to follow the instruction in Theme settings > App Intergrations > Wishlist 
• Version 1.3: Please follow the instruction below to update the code. 

If you are using MyMedi version 1.3 theme, when transitioning from Wishlist Compare Plus app to SWishlist: Simple Wishlist app you will need to edit your theme code to set up the app efficiently. Please follow the instruction below to update your theme code and intergrate the new app:

First of all, please install our new app SWishlist: Simple Wishlist. To prepare for editing your theme, we recommend that you should duplicate your theme to create a backup copy. This make it easy to discard your changes and start again if you need to. After you set up the theme code, you can push this theme live. 

Disable compare function 
Before you get started, you need to disable compare function because  SWishlist: Simple Wishlist app does not have the compare function.

Steps:
1. From your Shopify admin, go to Online Store > Themes.
2. Next to the live theme, click Customize to access the Theme editor.
3. Open Theme settings section, tap App Intergrations  

4. Uncheck Enable Compare and Save the change.

Edit your theme code
After you have disabled compare function, you will need to edit the code for your theme.
From your Shopify admin, go to Online Store >Theme > Find the theme you have just duplicated, click the ... button and then click Edit code
Once you are done each step, please remember to hit Save in the top right of the page to save your change.

Steps:

1. Look for the file named "theme.liquid" or type a keyword into the File filters... field to find the file. Once you find it, click on it.

In "theme.liquid" file, you need to find below code and remove it.

{%- liquid

    if shop.metafields.arena.wl_cp_settings.type == blank

        assign arn_wl_cp_settings = shop.metafields.arena.wl_cp_settings

    else

        assign arn_wl_cp_settings = shop.metafields.arena.wl_cp_settings.value

    endif

-%}

{%- capture wl_cp_Include -%}

    {% include 'arn_wl_cp_settings' %}

    {% include 'arn_wl_cp_styles' %}

    {% if arn_wl_cp_settings.general_settings.app_script != true %}

        <script defer crossorigin="anonymous" src="{{ 'arn-wishlist-compare.js'  | asset_url }}"></script>

    {% endif %}

{%- endcapture -%}

{%- unless wl_cp_Include contains 'Liquid error' -%}{{ wl_cp_Include }}{%- endunless -%}

Next, you continue finding these codes and remove them:

• {{- settings.wishlist_app -}}
  
  
• {%- capture wl_cp_Include -%}

          {%- capture content -%}{% include 'arn_icons_define' %}{%- endcapture -%}

          {%- render 'compress', content: content -%}

      {%- endcapture -%}{%- unless wl_cp_Include contains 'Liquid error' -%}{{ wl_cp_Include }}{%- endunless -%}
  
  
  

2. Find the file named "button.liquid" and click on it.

In "button.liquid" file, you need to find below code and remove it.

{%- when 'wishlist' -%}

  {%- if enableWishlist -%}

    {% capture the_snippet_fave_icon_menu %}{%- if settings.wishlist_app == 'growave' -%}{% render 'ssw-widget-faveicon-menu' with product.id %}{%- else -%}Liquid error{%- endif -%}{% endcapture %}

    {% unless the_snippet_fave_icon_menu contains 'Liquid error' %}

    {% else %}

      {%- capture WLCPInclude -%}{%- if wishlistApp == 'default' -%}{% render 'arn_wl_cp_settings' %}{%- else -%}Liquid error{%- endif -%}{%- endcapture -%}

      {%- assign wlSetting = wlcpSetting.wishlist_settings -%}

      {%- capture wlClass -%}

        {%- unless WLCPInclude contains 'Liquid error' -%}

          |{{ wlSetting.wishlist_show_class }}

          |{{ wlSetting.add_class_icon.icon_id }}

          {% unless wlSetting.wishlist_enable == true %}|disabled{% endunless %}

          "data-arn-action="show

        {%- endunless -%}

      {%- endcapture -%}

      {%- assign wlClass = wlClass | strip | strip_newlines | split: '|' | join: ' ' | uniq -%}

      <a href="javascript:void(0);" class="{{ button_class }}{{wlClass}}" aria-label="{{ type | capitalize }}">

        {%- if svgIcon != blank     -%}{%- render 'svg', type: 'custom', name: svgIcon -%}

        {%- elsif imgIcon != blank     -%}<img src="{{ imgIcon | img_url: '30x' }}" alt="{{type | capitalize}}">

        {%- else                     -%}<span class="svg-element-ui">{%- render 'svg', type: 'wishlist', stroke: stroke, fill: fill -%}</span>

        {%- endif -%}

        {%- unless btnContent == blank -%}{{- btnContent -}}{%- endunless -%}

        {% if wlcpSetting.general_settings.show_number_status == true %}

          <span class="number">

            <span class="n-item">0</span>

          </span>

        {% endif %}

      </a>

    {% endunless %}

  {%- endif -%}

After removing, you need to add the new code below into that line:

{%- when 'wishlist' -%}

  {%- if enableWishlist -%}

    <button class="st-wishlist-details-button" data-type="manually"></button>

  {%- endif -%}

In "button.liquid" file, you continue finding below code and remove it.

{%- when 'wishlist_add' -%}

  {%- if enableWishlist -%}

    {% capture the_snippet_fave_icon %}{%- if settings.wishlist_app == 'growave' -%}{% render 'ssw-widget-faveicon' with product.id %}{%- else -%}Liquid error{%- endif -%}{% endcapture %}

    {% unless the_snippet_fave_icon contains 'Liquid error' %}

      {{ the_snippet_fave_icon }}

    {% else %}

      {%- capture WLCPInclude -%}{%- if wishlistApp == 'default' -%}{% render 'arn_wl_cp_settings' %}{%- else -%}Liquid error{%- endif -%}{%- endcapture -%}

      {%- assign wlSetting = wlcpSetting.wishlist_settings -%}

      {%- capture wlClass -%}

        {%- unless WLCPInclude contains 'Liquid error' -%}

          |{{- wlSetting.wishlist_add_class -}}

          |{{- wlSetting.add_class_icon.icon_id -}}

          {% unless wlSetting.wishlist_enable == true %}|disabled{% endunless -%}

          " data-arn-action="add" data-handle="

          {%- if shop.metafields.arena.wl_cp_settings.wishlist_settings.launch_add.check_add_variant == true  -%}

          {{- product.selected_or_first_available_variant.id -}}

          {%- else  -%}

          {{- product.handle  -}}

          {%- endif -%}

        {%- endunless -%}

      {%- endcapture -%}

      {%- assign wlClass = wlClass | strip | strip_newlines | split: '|' | join: ' ' | uniq -%}

      {%- liquid

        assign svgIcon = settings.hicon_svg_wishlist_add

        assign imgIcon = settings.hicon_img_wishlist_add

      -%}

      <a href="javascript:void(0);" title="{{- 'products.product.add_to_wishlist' | t -}}" class="{{ wlClass }}">

        {%- if svgIcon != blank     -%}{%- render 'svg', type: 'custom', name: svgIcon -%}

        {%- elsif imgIcon != blank     -%}<img src="{{ imgIcon | img_url: '30x' }}" alt="{{type | capitalize}}">

        {%- else                     -%}<span class="svg-element-ui">{%- render 'svg', type: 'productWishlist' -%}</span>

        {%- endif -%}

        <span class="wlcp-target-label">{{- 'products.product.add_to_wishlist' | t -}}</span>

      </a>

    {% endunless %}

  {%- endif -%}

After removing, you need to add the new code below into that line: 

{%- when 'wishlist_add' -%}

  {%- if enableWishlist -%}

    <button class="st-wishlist-button" data-handle="{{ product.handle }}"></button>

  {%- endif -%}



3. Find the file named "product-detail-snippet.liquid" and click on it.

- You need to find below code and remove it.

{%- when 'wlcp' -%}

  <div class="product-wlcp-target">

    <div class="wlcp-target wl-target">

      {% capture the_snippet_fave %}{%- if settings.wishlist_app == 'growave' -%}{% render 'socialshopwave-widget-fave' %}{%- else -%}Liquid error{%- endif -%}{% endcapture %}

      {% unless the_snippet_fave contains 'Liquid error' %}

        {{ the_snippet_fave }}

      {% else %}

        {%- render 'button', type: 'wishlist_add', product: product -%}

      {% endunless %}

    </div>

    <div class="wlcp-target cp-target">

      {%- render 'button', type: 'compare_add', product: product -%}

    </div>

  </div>


- Next, you continue finding below code and remove it.

{%- if productLayoutStyle == 3 -%}

  {%- render 'product-detail-snippet', product: product, type: 'wlcp' -%}

{%- endif -%}

- Then, in this file, you continue finding below code: 
</div>
{% comment %}{%- render 'product-detail-snippet', type: 'preorder' -%}{% endcomment %}

Above that code, add the new code:

{%- if settings.enable_product_wishlist -%}

  <button class="st-wishlist-button" data-type="details" data-handle="{{ product.handle }}"></button>

{%- endif -%}

4. Find the file named "header.min.css" and click on it. 
Scroll down to the last line of the file and insert the below code. 

.header-content .header-icons .st-wishlist-details-button {

    padding: 0 10px;

}

@media (min-width: 1200px) {

    .header-content .header-icons .st-wishlist-details-button {

        padding: 0 12px;

    }

}

.header-content .header-icons .st-wishlist-details-button .st-number {

    display: block;

    text-align: center;

    font-weight: 700;

    position: absolute;

    top: 0px;

    right: -10px;

    width: 22px;

    height: 22px;

    line-height: 22px;

    font-size: 11px;

    background: var(--header-bg-cart-number-desk);

    color: var(--header-text-cart-number-desk);

    border-radius: 50%;

}

.featured_product__item .featured_product-overlay .card-button:hover>button>svg {

    color: inherit !important;

}

.section_content-body .featured_product-row .st-wishlist-button {

    padding: 0;

}

.featured_product__item .featured_product-overlay .st-wishlist-button svg {

    width: 16px;

    height: 16px;

}

body .st-product-card .st-atc-button,

body .st-product-card .st-more-details {

    color: var(--btn1-cl);

    background: var(--btn1-bg-cl);

    border: var(--btn1-border-width) solid var(--btn1-border-cl);

}

We hope that these detailed instruction will help you successfully set up  SWishlist: Simple Wishlist  app on MyMedi 1.3

If you have any questions or require further assistance, please do not hesitate to contact our support team by emailing: support@arenathemes.com