Difference between revisions of "Shopify Setup Information"

Revision as of 15:55, 10 August 2020 (view source) MVR (Talk | contribs) (→‎Add design to Cart with AJAX) ← Older edit		Revision as of 16:27, 10 August 2020 (view source) MVR (Talk | contribs) (→‎Product Codes for Cart) Newer edit →
Line 754:		Line 754:
	};		};
−	To invoke the script use:	+	To invoke the script use go to the Product Page and past this line to the console:
	PC(productOptions)		PC(productOptions)
	Open the resulting array and copy to clipboard.  Copy the three columns of numbers (hold the alt key when selecting in NotePad++) and past them into the .txt file for the appropriate parts.		Open the resulting array and copy to clipboard.  Copy the three columns of numbers (hold the alt key when selecting in NotePad++) and past them into the .txt file for the appropriate parts.

---

Revision as of 16:27, 10 August 2020

LIVE CHECK LIST

Email

1. reduce size if email accounts.

   • backup all emails. Use Outlook to save as a .pst file.
   • password protect this file as it contains email information.
   • Follow this link to archive old emails
   • instructions to import a .pst file
   • you can Open and close a .pst file without importing it to see the contents.
   • Wait for file to index you can see index status in in Search/Options/Search Tools/Indexing status.
   • To archive old emails in outlook file/info/tools/clean up old items then select archive folder and all sub-folders, select older than date, and file location. If you don't change the file name it will add it to existing. you can change to a new file and it will add a new archive folder to outlook.

2. make new emails on Rebel
3. move emails to Rebel

Notes on Email changes

These changes made in Nov 2019 before moving emails to rebel

1. I exported .pst files of all sales and michael email files to onedrive
2. saved as Michaelbackup and salesbackup on business onedrive/operations/email backup
3. then saved both together as All2019 which is all files to Nov 5 2019 from both emails in indec/downloads (not on onedrive) 5.2gb
4. added all2019 to outlook as folder Outlook Data File. this took +/- an hour to index. File contains all the emails from sales and michael to nov 5 2019.
5. Archived 2014-2016 folder from michael to imdec\Emails\Archive. While doing this outlook automatically archived sent items to imdec/documents/outlook files/archive.pst this file(folder documents) is is synced to the personal onedrive. Both archive files now show up in archives folder in outlook.
6. Cleaned up michael emails this reduced size by 93 mb.
7. Archived all emails in michael older than Jan 1 2019 to business onedrive in archive2018Michael this removed 426 mb from michael to reduce the size to 485 mb
8. used outlook to cleaned up sales email. This removed 4800 emails.
9. Archived all emails in sales older than Jan 1 2019 to business onedrive in archive2018Sales this removed 2909 mb from sales (3.75 gb) to reduce the size to 841 mb

Summarize Outlook Email Archives

Can be found in file/info/account settings under the data files tab.

1. Outlook Data Folder contains All2019.pst All emails to Nov 5 2019
2. Archive Michael contains 2014-2016
3. Archive Michael contains Sent folder
4. Archive Michael contains Older than Jan 1 2019
5. Archive Sales contains Older than Jan 1 2019

Auto Archive turned off. file/options/advanced/auto archive

Found this Link that explains how to unsubscribe folders. Need to do this. Not sure this is the best way, as I should be able to unsubscribe each folder individually.

add 100 products

finish rtf product descriptions

setup payment information

complete policies

generate site map for redirects

See the following instructions to add URL's from broken links

To go Live

1. backup emails in outlook
2. add emails to rebel. ca This will turn on "advanced DNS settings" for looseletters.ca so I can point to Shopify.

Theme Changes

theme Settings

button Colour

I set the button colour in the theme settings of the debut theme to #810C70

h2 Font

A copy of the original file is saves in the shopify/code folder on my PC.

In the file theme.scss.liquid on line 1394 the original theme is:

h2 {
  font-size: em(floor($font-size-header * 0.78));
  text-transform: uppercase;
  letter-spacing: 0.1em;

  @include media-query($small) {
    font-size: em(floor(($font-size-header * 0.78) * 0.9));
  }
}
 

I made the following changes:

1. the text-transform to none.
2. changes the letter-spacing to 0.
3. the font-size-header * (factor) from 0.78 to 1.
4. the media-query font-size-header to 1.0
5. Added the colour of the button to the header.

This is how it is as of Oct 14th 2019

/*=====Start of changes made by MVR Oct 14 2019========*/
h2 {
  font-size: em(floor($font-size-header * 1.00));
  text-transform: none;
  letter-spacing: 0;
  color: #810C70;
  @include media-query($small) {
    font-size: em(floor(($font-size-header * 1.00) * 1.0));
  }
}
/*=====End of changes made by MVR Oct 14 2019========*/

Product Data

HS Tariff Code

HS (Harmonized System) code Used by border officers to classify this product.

• Finished signs 970190 --Arkwork, collages and similar decorative plaques
• RTF products 940560 --Illuminated signs, name plates and the like.

Sale to RTF

in locales file en.default.json on line

336 "on_sale": "Sale", 337 "sale_price": "Sale price",

changed "Sale" to "RTF" --MVR (talk) 18:50, 28 September 2019 (CDT)

Variants

IMAGE update

To change the variant by clicking the image.

Make the changes by following these instructions: https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-images

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Sections folder, open the product-template.liquid template. (If your theme is Venture, see the note above.)

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue,
    productOptions = [];
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
         
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
         	
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
       productOptions.push(variant);
    {% endfor %}
</script> 
{% endif %}

1. 4 Paste the copied code at the bottom of the product-template.liquid template.
2. Click Save.
3. Open the theme.js or theme.js.liquid file in your Assets folder.

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {
           optionValue = variantImages[strNewImage]['option-'+i];
           if (optionValue !== null && $('.single-option-selector:eq('+i+') option').filter(function() { return $(this).text() === optionValue }).length) {
             $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
           }
        });
      }
    });
  }
});

DESCRIPTION Update

Change the description to match the variant.

https://community.shopify.com/c/Shopify-Design/Demo-change-description-in-product-with-different-variants/m-p/276269

need to figure out how to establish Option number so display can be triggered on Option #

When you edit the product description, go into "Show HTML" mode. You need to create some panels. Each panel should contain the ID and description of that variant:

<p class="description" id="7397573253">Description for variant 1</p>
<p class="description" id="7397573317" style="display: none;">Description for variant 2</p>
<p class="description" id="7397573381" style="display: none;">Description for variant 3</p>

Where:

• id is the variant ID can be seen in URL when variant is selected
• productOptions[0].id will also give the variant id where [0] is the array index.

document.getElementById("test0").id = productOptions[0].id.toString()

• style="display: none" tells the browser not to show that description
• class="description" its a hook we need to use for the callback

Having this done in the description you need to edit the product.liquid (or wherever your variant change is) and add this:

Line 729 of Theme.js is place to add change to descriptions.

// selectCallback is the callback name in Timber
var selectCallback = function(variant, selector) {

   // Simply toggle on/off the panel according to the variant selected
    $('.description').css('display', 'none');
    $('#' + variant.id).css('display', 'block');
// rest of the Timber code
}

Variant choices for name signs

Choose how you want it...

• It's Perfect -- I want the sign in the Picture (ships within 2 days),
• Unfinished -- I want to Paint it myself (ships within 2 days),
• I love the Style -- I want different Colours (ships within 4 weeks),
• I love the Colours -- I want a different Name (ships within 4 weeks)

change the description per variant

In the assets folder find theme.js. At the bottom of the file ~ line 3998 add the javascript to add variant descriptions if the div tag exists.

  //ADDED BY MVR TO UPDATE VARIANT ID'S
  if (document.getElementById("test0")) {
    
    document.getElementById("test0").innerHTML = "<h3>Purchase this sign! </h3>"+
      "<p>In stock signs are <strong>ready to ship</strong> and will be shipped within 2 business days, subject to prior sale.  </p>"+
      "<p><em>If this sign is sold out, don't worry, we can make one like it just for you."+
      ' Choose the I Love the Colours option above and order the same name in the same colours.  Custom orders will take up to 4 weeks.</em></p>'+
	  "<p> </p>"    
    
    document.getElementById("test0").id = productOptions[0].id.toString();
  	//alert("test0");
  }
  if (document.getElementById("test1")) {
    document.getElementById("test1").innerHTML = "<h3>Paint your own!</h3>"+
	"<p>You can <strong>purchase the unfinished pieces </strong>and paint it yourself. "+
      "This order include the letters shapes and board you see in the picture. "+
      "Finishing instructions and tips can be found at the DIY Tips tab at the top of this page. "+
      "These are in stock and your order will be shipped within 2 business days. </p>"+
	  "<p> </p>"
    
    document.getElementById("test1").id = productOptions[1].id.toString();
  	//alert("test1");
  }
  if (document.getElementById("test2")) {
    document.getElementById("test2").innerHTML = "<h3>Custom Colours!</h3>"+
	"<p>Like the sign, want different colours. "+
    "Custom orders take up to 4 weeks to complete and ship.  A short time to wait, for something that will last a lifetime.</p>"+
	"<h4>Notes for Custom Colours:</h4>"+
	"<ol>"+
	"<li>The colour chart shows the 19 colours we offer.</li>"+
	"<li>Include your colour instructions in the comments box of the shopping cart before you check out!</li>"+
	"<li>We will send you a layout for your approval before we make your perfect sign.</li>"+
	"<li>We are happy to make changes to the layout, free of charge, until you are happy with your order. </li>"+
	"</ol>"+
	"<p> </p>"
    
    
    document.getElementById("test2").id = productOptions[2].id.toString();
  	//alert("test2");
  }
  if (document.getElementById("test3")) {
    document.getElementById("test3").innerHTML = "<h3>Change the Name!</h3>"+
    "<p>If you want a <strong>different name</strong> you can have that as well.</p>"+
	"<h4>To order a Different Name: </h4>"+  
	"<ol>"+
	"<li>A different name needs to have the same amount of letters as this sign.</li>"+
	"<li>Include the new name in the comments box of the shopping cart before you check out! </li>"+
	"<li>We will send you a layout of the new name for your approval before we make your perfect sign.  </li>"+
	"</ol>"+
    "<p>Custom orders take up to 4 weeks to complete and ship. "+
    "A short time to wait, for something that will last a lifetime.</p>"+
    "<p> </p>"
    
    document.getElementById("test3").id = productOptions[3].id.toString();
  	//alert("test3");
  }
  if (document.getElementById("notes1")) {
    document.getElementById("notes1").innerHTML = "<p><em>Be sure to check the dimensions shown in the photos with the rulers. "+
      "The rulers show both inches and centimetres.</em></p>"+
      "<p>Before adding to the cart select how you want your sign from the choices above.</p>"     
    
    
    
    
  }

The javascript checks to see if the div is present in the product description and if it is adds the inner html to the div. It replaces all the innerHTML The tags that is looks for are:

<div class="description" id="test0"></div>
<div class="description" id="test1"></div>
<div class="description" id="test2"></div>
<div class="description" id="test3"></div>
<div class="description" id="notes1"></div>

Meta Data

For the full spec see [1]

Metadata used for images

Add / Edit Metadata in Adobe Bridge

IPTC Core	Site Images	RTF Product	Finished Product
Creator	Michael Van Raay	Michael Van Raay	Michael Van Raay
Web URL(s)	https://www.looseletters.ca	https://www.looseletters.ca	https://www.looseletters.ca
Headline	Canadian made quality letters, boards and shapes	Great letters for your door or wall creative fun project.	Canadian made unique individual name signs
Description	Quality MDF wooden individual letters for your creative craft project	Individual 3 inch MDF DIY Wall Letters	Quality MDF wooden individual letters paint your own or purchase finished product
Keywords	letters alphabet wooden MDF DIY name sign craft individual	letters alphabet wooden DIY name sign craft individual	wooden MDF DIY name sign mounting board plaque craft looseletters
IPTC Subject Code
State/Province	Ontario	Ontario	Ontario
Country'	Canada	Canada	Canada
Title		Bedroom wall door name sign
Credit Line	LooseLetters.ca	LooseLetters.ca	LooseLetters.ca
Copyright Notice	©2019 Michael Van Raay	©2019 Michael Van Raay	©2019 Michael Van Raay
Copyright Status	Copyrighted	Copyrighted	Copyrighted
Rights Usage Terms	Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)	Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)	Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)
Copyright Info URL: ???	http://creativecommons.org/licenses/by-nc-nd/4.0/

Definitions of Meta Data Categories

• Copyright Notice - ©2019 Michael Van Raay

Contains any necessary copyright notice for claiming the intellectual property for this photograph and should identify the current owner of the copyright for the photograph. Other entities like the creator of the photograph may be added in the corresponding field. Notes on usage rights should be provided in "Rights usage terms". Enter a Notice on the current owner of the Copyright for this image, such as ©2008 Jane Doe

• Creator - Michael Van Raay

Definition Contains the name of the photographer, but in cases where the photographer should not be identified the name of a company or organisation may be appropriate. Enter the name of the person that created this image.

• Credit Line - LooseLetters.ca

Definition The credit to person(s) and/or organisation(s) required by the supplier of the image to be used when published. This is a free-text field. Enter who should be credited when this image is published.

• Description - Individual 3 inch MDF Letter

Definition A textual description, including captions, of the image. Enter a "caption" describing the who, what, and why of what is happening in this image, this might include names of people, and/or their role in the action that is taking place within the image.

• Description Writer - Michael Van Raay

Definition Identifier or the name of the person involved in writing, editing or correcting the description of the image. Enter the name of the person involved in writing, editing or correcting the description of the image.

• Headline - great letters for your wall

Definition A brief synopsis of the caption. Headline is not the same as Title. Enter a brief publishable synopsis or summary of the contents of the image.

• Keywords - letters alphabet wooden DIY name signs

Definition Keywords to express the subject of the image. Keywords may be free text and don’t have to be taken from a controlled vocabulary. Codes from the controlled vocabulary IPTC Subject NewsCodes must go to the "Subject Code" field. Enter any number of keywords, terms or phrases used to express the subject matter in the image.

• Rights Usage Terms - Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)

see this thread [2]

Definition The licensing parameters of the image expressed in free-text. Enter instructions on how this image can legally be used

• Source - ???

Definition The name of a person or party who has a role in the content supply chain. This could be an agency, a member of an agency, an individual or a combination. Source could be different from Creator and from the entities in the Copyright Notice.

• Subject Code ???

Definition Specifies one or more Subjects from the IPTC Subject-NewsCodes taxonomy to categorise the image. Each Subject is represented as a string of 8 digits in an unordered list. Enter only values from the IPTC Subject NewsCode Controlled Vocabulary (see: [3])

• Title --

Definition A shorthand reference for the digital image. Title provides a short human readable name which can be a text and/or numeric reference. It is not the same as Headline. Enter a short verbal and human readable name for the image, this may be the file name. Many use the Title field to store the filename of the image, though the field may be used in many ways. Formal identifiers are provided by the Digital Image Id, or the Registry Entry property of the IPTC Extension.

Contact Information structure - Definition A generic structure providing a basic set of information to get in contact with a person or organisation. It includes an Address, a City, a Country, Email address, Phone number, a Postal Code, a State or Province and Web URL.

• Address -- LooseLetters.ca Michael Van Raay Box 1791 15 John Street East

Definition The contact information address part. Comprises an optional company name and all required information to locate the building or postbox to which mail should be sent. To that end, the address is a multiline field. Enter Address for the person that created this image.

• City -- Exeter, Ontario

Definition The contact information city part. Enter the City for the address of the person that created this image

• Country -- Canada

Definition The contact information country part. Enter the Country name for the address of the person that created this image.

• Email address(es) sales@looseletters.ca

Definition The contact information email address part. Enter the work Email address(es) for the person that created this image, such as name@domain.com

• Phone number(s) +1 519-235-3633

Definition The contact information phone number part. Enter the work Phone number(s) for the person that created this image, using the international format, such as +1 (123) 456789

• Postal Code -- N0M 1S7

Definition The contact information part denoting the local postal code. Enter the Postal Code for the address of the person that created this image.

• State/Province -- Ontario

Definition The contact information part denoting regional information such as state or province. Enter the State for the address of the person that created this image.

• Web URL(s) -- https://www.looseletters.ca

Definition The contact information web address part. Multiple addresses can be given. May have to be separated by a comma in the user interface. Enter the work Web URL(s) for the person that created this image, such as http://www.domain.com/

Product Import Procedure

Excel files

Open the following files and enable macros.

1. Product Export Sheet.xlsb
2. Product1.csv
3. Inventory18.xlsb

Process

ENTER the information:

1. Enter the Inventory Item number. If the sign is not listed in Inventory18.xlsb OR has already been added to Shopify, you will get an error.
2. Excel will look up name and location in Inventory file. These can be overridden by entering new values to the right of displayed values
3. Enter the Height and width of sign in whole inches round up.
4. Enter the height of board or leave blank for no board. This is a list with error checking so only valid heights are accepted.
5. Enter the Character size of board. 1 to 12. the width in inches will be displayed to the right. This is a list with error checking so only valid heights are accepted.
6. Enter the weight of the sign in grams.
7. Enter the count of each size of shapes (this is used to calculate the prices of the sign) If more shapes are checked than added here, an error will show in the price.
8. Select the radio button for the style. The existing style is shown for reference but may not be correct. The style determines the price and description of the product.
9. Select the shapes on the sign. Adds tags for shapes and description for some shapes.
10. Select descriptive tags for sign (adds tag and wording to description) Use sparingly.
11. Select the Colour summary radio button to best describe the sign.
12. Select the glitter or sparkles on the sign (this will add a tag, change the price, and be added to the description)
13. Select all the colours that are used in the sign.

REVIEW the information.

1. the descriptive product title will be beside the save button
2. the tag list is below the product
3. the price for RTF, Stock and Custom
4. scroll down to see the written description.

SAVE the information:

1. confirmed the data by pressing the SAVE button and the MACRO will complete the following steps:
2. the macro will copy the CSV data to the Products1.csv file and save that file.
3. the macro will add an entry in the Inventory18.xlsb file to move the location of the sign, update the style, and record the dimensions and tags selected. and save the Inventory18.xlsb file.
4. the macro will return to the Input screen and reset all the values to the default ready to Input the next sign.

Tags

These are the product tags that allow products to be sorted or grouped together.

Catagories

Select ONE that defines Catagory for Product:

Letter Count

Select ONE for the number of letters on the sign:

Letter Sizes/Styles

Select ONE style:

Board Sizes

Select ONE board height:

Select ONE board width for 3.5 height boards:

Select ONE Width for 5.5 9.5 and 13.5 height boards:

Shapes

Select ALL that apply:

Colours

Select ALL colours that apply:

Select ALL Twinkles that apply:

• Glitter
• Sparkle

Select ONE best describes:

• two-tone
• one-colour
• two-colour-mix
• three-colour-mix
• multi-colour-mix

Image Sizes

MainPage

Banner Image has 3 size choices:

• short height 33% 2048 wide by 675px
• medium height 50% 2048 wide by 1024px
• tall height 66% 2048 wide by 1372px

Logo is adjustable between 50px and 250px wide

Favicon is 32 x 32

Slide show images set to Large 1200 wide x 756 wide

• Shopify recommends 2:1 aspect ratio is 1200 wide x 600 tall

Products

DIY

Change board Sizes in Fusion

1. Roll history marker to begining.
2. Change parameters of board Sizes
3. Roll history to display sketch
4. edit display sketch to update array of shelves
5. render individual boards
6. roll history to end, move dividers if changing board lengths
7. render rack of boards.

RTF items are rendered in Fusion

• Product Catagory Banner is 2048 x 400 save as jpeg
• Product Images are 2048 x 2048 saves as jpeg
• Show 2" and 8" as 2/3 of full screen
• Show 3" and 12" as full screen (90%)

Rendered in Fusion

Render Value	Products	Banner	Brightness	1000lx	1700 lx
Ground Plane	Check	Check
Position	-63 deg	-19.9 deg
Focal length	65mm	67mm
background	Solid white	Solid White/gray
Exposure	9.2EV	9.5 EV
Aspect Ratio	1:1 Square	Custom
Custom Render
*width	2048	2048
*Height	2048	675
*Filetype	jpeg	jpeg
*Render	Local	Local
*Quality	Final	Final

Meta Data

• Title = Individual Letters
• Subject = DIY 2 inch letters
• Authors = LooseLetters.ca
• Copyright = Michael Van Raay

Stock Signs

File Naming Convention

For groupings

• website use "-setV#"
• products use -catV#"
• RTF Components --
  • Letters LooseLetters-DIY-wooden-mdf-craft-letter-L02A.jpg
  • Boards LooseLetters-DIY-wooden-mdf-craft-board-B001.jpg
  • Shapes LooseLetters-DIY-wooden-mdf-craft-shapes-S02flw.jpg
• Stock Signs -- Name-Wall-Door-Sign-decor.jpg
• Website Pictures -- LooseLetters-sell-letters-name-signs-???.jpg
• Customer Creations -- fan-creation-idea-paint-your-own-submission-???.jpg
• Shapes -- LooseLetters-wooden-mdf-DIY-shapes-2inch-Set

sku

Letters

• L02A - Z 1.75 x 1.2 = 2.10
• L03A - Z 2.50 x 1.2 = 3.00
• L08A - Z 6.00 x 1.2 = 7.20
• L12A - Z 9.00 x 1.2 = 10.80

Shapes

replace number with size

• S02dgr (head on right side)
• S02dgl (head on Left Side
• S02flw
• S02hrt
• S02hsh
• S02not
• S02paw
• S02str
• S02tbc

Punctuation

• M02amp -- &
• M02aps -- ,
• M03crt -- ^
• M02dsh -- -
• M02plu -- +
• M02pnd -- #
• M02prd -- .
• M02sls -- sls

boards

• B001 -- B012 3-1/2" tall boards 3-1/2 to 25-1/2 wide
  • price base 1.75 * 1.20 =2.10 + 0.25 per increment

 2.10 2.35 2.60 2.85 3.10 3.35 3.60 3.85 4.10 4.35 4.60 4.85

• B101 -- B112 5-1/2" tall boards 5-3/4 to 38-3/4 wide
  • price base 3.50 x 1.20 =4.20 + 0.50 per increment

 4.20 4.70 5.20 5.70 6.20 6.70 7.20 7.70 8.20 8.70 9.20 9.70 

• B201 -- B212 9-1/2" tall boards 5-3/4 to 38-3/4 wide
  • price base 6.00 x 1.20 =7.20 + 1.00 per increment

 7.20 8.20 9.20 10.20 11.20 12.20 13.20 14.20 15.20 16.20 17.20 18.20

• B301 -- B312 13-1/2" tall boards 5-3/4 to 38-3/4 wide
  • price base 7.50 x 1.20 =9.00 + 1.50 per increment

 9.00 10.50 12.00 13.50 15.00 16.50 18.00 19.50 21.00 22.50 24.00 25.50

Add Design to Cart with AJAX

Changes to Add items to cart using Ajax calls. Made a copy of Theme before starting on March 9, 2020

I used these instructions

ProductOptions

Product options are numbered 0 to 26 ProductOptions[7].id = (product id number) 30337160282161 ProductOptions[7].title = H

The following function will add an item to the cart.

function MVR(gwp_id) {
   let addData = {
     'id':gwp_id,
     'quantity':1
   };
   fetch('/cart/add.js', {
     method: 'POST',
     credentials: 'same-origin',
     headers: {
       'Content-Type': 'application/json',
       'X-Requested-With': 'XMLHttpRequest'
     },
     body: JSON.stringify(addData)
   }).then(function (data) {
     if (data.status == 200) {
       window.location.reload;
       return
     }
     else {
       console.log('Request returned an error', data)
     };
   })
   .catch(function (error) {
     console.log('Request failed', error);
   });
 };

To use this function:

MVR(productOptions[2].id)

where the number is the array position of the product. or

MVR(30337160282161)

where the number is the id number of the variant 7 or H.

Product Codes for Cart

The product codes from Shopify need to be added to the mvr.parts object so that the mvr.Cart function can find the product and add it to the cart with the correct price. This javascript routine can be pasted into the console of the Product. It will gather and format the codes.

function PC(P1){
 console.log(P1);
 var P2 = [];
 for (var k = 0; k < P1.length; k += 3) {
  var P3 = []
  P3.push('"letter" : '+(P1[k].option1)+',"rtf" : '+(P1[k].id)+', "id" : '+(P1[k+1].id)+', "twk" : '+(P1[k+2].id));
  
  P2.push(P3);
 };
 console.log(P2);
};

To invoke the script use go to the Product Page and past this line to the console:

PC(productOptions)

Open the resulting array and copy to clipboard. Copy the three columns of numbers (hold the alt key when selecting in NotePad++) and past them into the .txt file for the appropriate parts.