Shopify: Setting up a multipurpose CMSed liquid homepage section

Setting up a multipurpose CMSed liquid homepage section for Shopify.

The below schema includes two sets of data

  1. A YouTube Video display
  2. A list of testimonials (max 5)
{% schema %}
  {
    "name": "Video & Testimonial",
    "max_blocks": 5,
  	"settings": [
		{
          "id": "video_title",
          "type": "text",
          "label": "Heading",
          "default": "Learn 'How to' with our video"
		},
		{
          "id": "video_sub",
          "type": "text",
          "label": "Heading",
          "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed incididunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
		},
		{
          "id": "video_code",
          "type": "text",
          "label": "YouTube Code",
          "default": "GF60Iuh643I"
		},
		{
          "id": "video_image",
          "type": "image_picker",
          "label": "Background Image"
		}
  	],
  	"blocks": [
      {
        "type": "testimonial",
        "name": "Testimonial Option",
        "settings": [
          {
            "id": "testimonial_subject",
            "type": "text",
            "label": "Testimonial Subject"
      	  },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "id": "testimonial_desc",
            "type": "textarea",
            "label": "Testimonial Description"
          },
          {
            "id": "testimonial_author",
            "type": "text",
            "label": "Testimonial Author"
          }
        ]
      }
      
    ],
    "presets": [
      {
        "name": "Video and Testimonial",
        "category": "Testimonial",
		    "settings": {}
      }
    ]
  }
{% endschema %}

First we grab and display the variables from the Settings section of the JSON

<div class="medium-6 columns">
	<div class="content-wrap">
		<h3><span class="subheading">Learn 'How to' with our</span>{{ section.settings.video_title }}</h3>
		<p>{{ section.settings.video_sub }}</p>
		<a data-fancybox href="https://www.youtube.com/watch?v={{ section.settings.video_code }}" class="button">View Video</a>
	</div>
</div>
<div class="medium-6 columns">
	<a data-fancybox class="image-wrap" href="https://www.youtube.com/watch?v={{ section.settings.video_code }}">
		<img class="play-button" src="//cdn.shopify.com/s/files/1/2602/4064/t/2/assets/play-button.png">
		<img src="{{ section.settings.video_image | img_url }}">
	</a>
</div>

Then we grab the repeating testimonial blocks

{% if section.blocks.size > 0 %}
<section class="testimonial1 angle-bigarrow">
	<div class="row">
		<div class="small-12 column">
			<ul class="grid-1 wow fadeInUp">
				{% for block in section.blocks %}
				<li {{ block.shopify_attributes }}>
					<div class="testimonial-inner">
						<img src="{{ block.settings.image | img_url: '150x150' }}" alt="slider" />
						<h5>{{ block.settings.testimonial_author }}</h5>
						<p>{{ block.settings.testimonial_desc }}</p>
					</div>
				</li>
				{% endfor %}
			</ul>
		</div>
	</div>
</section>
{% endif %}

 

Shopify: List product variations on collection pages

The code below will allow you to display a set of product variations on a Shopify product collection pages.

Set this code in the collections page product loop, or within the liquid snippet that controls the display of products. On line three I’ve specified “Weight” as the option I want to display so on the list page the customer can see that I have 25ml, 50ml, and 100ml product sizes available.

{% for option in product.options %}
  {% if option == 'Weight' %}
    {% assign index = forloop.index0 %}
      {% for variant in product.variants %}
        {{ variant.options[index] }}
      {% endfor %}
    {% endif %}
{% endfor %}

Checkout problems upgrading to Magento 1.9.3.4+

Magento version 1.9.3.4 include patch SUPEE-9767 V2 which includes security patching for the checkout process.

For your current front-end templates to work with this patch you will need to include a form key value to a number of forms in the checkout process.

<?php echo $this->getBlockHtml('formkey') ?>

Load the templates below from your  app/design/frontend/<package>/<theme> directory and add the Form Key code above between the <form> and </form> tags on each.

The basic templates that will need upgraded:

  • /template/checkout/cart/shipping.phtml
  • /template/checkout/onepage/billing.phtml
  • /template/checkout/onepage/shipping.phtml
  • /template/checkout/onepage/payment.phtml

If persistant checkout is enabled:

  • /template/checkout/onepage/shipping_method.phtml
  • /template/persistent/checkout/onepage/billing.phtml

If you allow shippinng to multiple addresses:

  • /template/checkout/multishipping/billing.phtml
  • /template/checkout/multishipping/shipping.phtml

Ordering assets in Magento 2

This one will come in useful until Magento 2 sorts itself out.

For some reason, Magento 2 has no way to order assets out of the box. There is now an extension which allows you to set an order attribute in the CSS tags of the layout XML files and layout updates in Admin Panel.

Github: Mage2 Ordered Assets by Quickshiftin

Example

Before

<head>
   <css src="css/app.css" />
</head>

After

<head>
   <css src="css/app.css" order="100" />
</head>

PHP: glob

glob($string);

Return an array of pathnames matching a specific pattern.

// Find all CSV files in the /home/var/imports/ directory 
glob("/home/var/imports/hello-*.csv");
  • /home/var/imports/hello-world.csv – Returned
  • /home/var/imports/hell-world.csv – Not returned
  • /home/var/imports/hello-.csv – Returned.

Magento Code: Check an import directory for new product CSVs and process using a Magmi profile

This script will first scan the var/import directory for all CSV files starting “import-” using the glob() function in PHP. It will return an array of any files which match the query in the directory including the file path from root.

The $file_parts will be used later when we need just the file name.

$cmd is the executable shell command we will be using to load Magmi, set the profile, mode and chosen file.

The shell_exec() function runs the command and will return any output to the $output variable, this can be expanded to check for a successful import. The script below will carry on regardless of import status.

Once the import is complete we take the CSV and copy it into an archive folder, just in case we want to reuse it. The original file is then deleted from the var/import folder using unlink()

This script can then either be run manually, or set-up as a scheduled task using Cron.

// Find all CSV files in import directory
$files = glob('/home/admin/public_html/var/import/import*.csv');

// For each of the files found 
foreach ($files as $file):

   // Explode for teh the file name in 6th position of the array
   $file_parts = explode("/",$file);

   // Set-up the command 
   $cmd = 'php /home/admin/public_html/magmi/cli/magmi.cli.php -profile=default -mode=create -CSV:filename="'.$file.'"';

   // Execute the comamnd 
   $output = shell_exec($cmd);

   // Copy the executed script into an archive folder
   if ( copy($file,'/home/admin/public_html/var/import/archive/'.$file_parts[6]) ):
      // Delete the original
      unlink($file);
   endif;

endforeach;

PHP: header

header($string);

Used to send a raw HTTP header, often used for page redirects.
Must be called before any other output is sent.

// Redirect the request to https://keithgreer.uk
header("Location: https://keithgreer.uk");
// Send an error code to the browser, for example a 404
header("HTTP/1.0 404 Not Found");

PHP: str_replace

str_replace($search,$replace,$subject)

All instances of $search are replaced with $replace in $subject.

// Will print to screen: "Why is the sky blue?". 
echo str_replace("red","blue","Why is the sky red?")

Magento Code: Include currency switcher in the header or footer with Foundation mark-up

It is easy to set-up multi-currencies in Magento. This code  allows you to quickly include a currency drop down or link to  the header or footer of your Magento store. Before you begin make sure you have enabled more than one currency  as this example won’t work without at least one additional currency alongside your base currency.

Set-up the following code in your theme directory /app/design/frontend/package/theme/template/currency/currency.phtml. I’ve included code for both a drop down select box, or inline list of hyperlinks.

Continue reading Magento Code: Include currency switcher in the header or footer with Foundation mark-up

Magento Code: Add a drop down attribute and display it on the product page in custom HTML

Magento makes it really easy to expand the usual product attributes through the Admin Panel. While these can be added to the product page in the standard attribute list table, you may want your attribute to appear differently or use it for another feature. This post explains how.

In this example we’ll be adding an attribute to tell the customer how long they might have to wait on a product to arrive.

Continue reading Magento Code: Add a drop down attribute and display it on the product page in custom HTML