acromedia / orange_ecom_starter

A starting theme for Drupal E-Commerce projects.

Drupal Orange E-Commerce Starter

Notice
Development for this theme has moved to Drupal.org. If you want to submit issues, develop, or use this theme please visit the new project page.
No pull requests submitted to this repository will be accepted.

Custom theme by Acro Media Inc.

Introduction

This custom theme uses the Orange Framework as a base theme.

Requirements

Base Theme: Orange Framework.

Installation

Enable the theme and away you go.

Configuration

Sass

• Configured to compile using Gulp.
• Compile to CSS by running the following commands:
  • npm install
  • gulp
• The CSS will be compiled to: css/style.css

Starting Your New Custom Theme

This theme is meant to be copied and renamed to become your custom theme for your project. Follow the steps below to live a happy life. #blessed

• Copy/rename this theme folder into /web/themes/custom/your_custom_theme_name.
• Remove the .git folder and composer.json file from your theme.
• Rename the core theme filenames replacing orange_ecom_starter with the name of your new theme. List of core files below:
  • orange_ecom_starter.breakpoints.yml
  • orange_ecom_starter.info.yml
  • orange_ecom_starter.libraries.yml
  • orange_ecom_starter.theme
  • config/schema/orange_ecom_starter.schema.yml
• Within your theme folder, find and replace the string orange_ecom_starter with your new theme name within all the files. This will change all the hook references, libraries etc. I would avoid manually sifting through the files as you'll likely miss something within one of the templates.
• Make sure to update the Orange E-Commerce Starter label/name strings within config/schema/orange_ecom_starter.schema and orange_ecom_starter.info.yml as well.
• Update the screenshot.png and favicon.ico files to match your new theme.
• Update the color and font variables within sass/custom/_variables.scss to quickly adjust the theme to be more geared towards your project. Chat with a Creative department resource if you need help choosing appropriate choices.
• Update the README.md with project specific details, and remove this Starting Your New Custom Theme section.
• If you run into any issues, just call my name cause I'll hear you scream.
• Master, master!

orange_ecom_starter's Issues

commerce-product--teaser product image can be blank

In the following code, we check to see if any of the product variations have an image. We then assume that the first variation has an image attached to it. If a product has multiple variations, and the first variation does not have any images, the image for the teaser will be blank.

{% set product_thumbnail_placeholder_url = base_path ~ directory ~ '/gfx/product-placeholder.jpg' %}
{% set product_thumbnail_placeholder_alt = product_entity.title.value %}

<a href="{{ product_path }}" class="product-teaser">
  <div class="product-teaser__thumbnail">
    {% if product_variation_images %}
      <img src="{{ product_variation_images.0.images.0.entity.uri.value|image_style('product_thumbnail') }}" alt="{{ product_variation_images.0.images.0.alt }}" />
    {% else %}
      <img src="{{ product_thumbnail_placeholder_url }}" alt="{{ product_thumbnail_placeholder_alt }}" />
    {% endif %}
  </div>
  <div class="product-teaser__title">
    {{ product.title }}
  </div>
  <div class="product-teaser__price">
    {{ product.variation_price }}
  </div>
</a>

Suggested fix:

{% set product_thumbnail_placeholder_url = base_path ~ directory ~ '/gfx/product-placeholder.jpg' %}
{% set product_thumbnail_placeholder_alt = product_entity.title.value %}
{% set product_thumbnail = null %}

<a href="{{ product_url }}" class="product-teaser">
  <div class="product-teaser__thumbnail">
    {% if product_variation_images %}
      {% for variation_images in product_variation_images if product_thumbnail == null %}
        {% for variation_image in variation_images.images if product_thumbnail == null %}
          {% if variation_image.entity.uri.value %}
            {% set product_thumbnail = variation_image %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    {% endif %}
    {% if product_thumbnail %}
      <img src="{{ product_thumbnail.entity.uri.value|image_style('product_thumbnail') }}" alt="{{ product_thumbnail.alt }}" />
    {% else %}
      <img src="{{ product_thumbnail_placeholder_url }}" alt="{{ product_thumbnail_placeholder_alt }}" />
    {% endif %}
  </div>
  <div class="product-teaser__title">
    {{ product.title }}
  </div>
  <div class="product-teaser__price">
    {{ product.variation_price }}
  </div>
</a>

Endeavor to have zero pa11y errors on the first page load

$ npm install -g pa11y
$ pa11y https://drupalorangesite.com/ > pa11y-acro-orange.log

pa11y-acro-orange.log

• Error: This textinput element does not have a name available to an accessibility API. <input data-drupal-selector="edit-search" type="text" id="edit-search"...
• Error: This form field should be labelled in some way. <input data-drupal-selector="edit-search" type="text" id="edit-search"...
• Error: Duplicate id attribute value "edit-actions" found on the web page. <input data-drupal-selector="edit-search" type="text" id="edit-search"...

etc...