Template Fluorspar

[Silver Kamel]

v1.5.6a PHP 7.0.3

FYI I am getting NO response from peejay who uploaded the FLUORSPAR template. Plus it does not work.
I found the source of this template at www zenofobe com but when I tried to download it my McAfee blocked and deleted the download warning that it contained a virus. So buyer beware! I also left a message at that site and as of yet have had no reply.
I have been trying some of the responsive templates. The ZC Responsive 156a works. Just got to work on it a bit..

Bless.... Kamel

P.S. I will be donating $100.02... $100.00 for the 1.5.6a template and $0.02 for my rant...

[peejay]

The file you attempted to download from my website is perfectly safe and virus free, your McAfee software is giving a 'false positive'.
The comment 'So buyer beware!' is misplaced but thanks for bringing this anomaly to my attention.

[Don Wagner]

I would really like to use the Fluorspar Template but am running into a problem: The large Product Images are being forced into an odd perspective which looks to be based on the width and height of the first Product Image. So if the first Product Image is square, all the other product images are forced to be square, etc. This only happens when Fluorspar Template is selected. Maybe I have my Images configured wrong but have not found the Admin setting change which fixes this ("Image - Use Proportional Images on Products and Categories" sounds related but does not have any effect whether zero or one).

[peejay]

Template Fluorspar uses Photoswipe to display the large product image which requires all
images to be the same dimensions (the preference of most Zen Cart users). However I have found a
solution here https://stackoverflow.com/questions/...age-size-ratio
which may solve your problem. Open file :-

includes/templates/fluorspar/jscript/photoswipe_init.js

replace the code with this :-

( function( $ ) {
"use strict";
  
  var $pswp = $('.pswp')[0];
    var image = [];
    $('.product-images-wrap').each( function() {
      var $pic     = $(this),
      getItems = function() {
        var items = [];
        $pic.find('a').each(function() {
          var $href   = $(this).attr('href'),
              $size   = $(this).data('size').split('x'),
              $width  = $size[0],
              $height = $size[1];
          var item = {
              src : $href,
              w: 0,
               h: 0
          }
          items.push(item);
        });
        return items;
      }
      var items = getItems();
      $.each(items, function(index, value) {
        image[index]     = new Image();
        image[index].src = value['src'];
      });
      $pic.on('click', 'figure', function(event) {
        event.preventDefault();
        var $index = $(this).find('a').data('index');
        var options = {
            index: $index,
            bgOpacity: 0.7,
            showHideOpacity: true, 
            captionEl : false,
            fullscreenEl : true,
            shareEl : false,
            tapToClose : true,
            tapToToggleControls : false,
            closeOnScroll: false,
            history:false,
            closeOnVerticalDrag:false,
            zoomEl: true,
            counterEl: true,
            arrowEl: true,
            shareButtons: [
         {id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
         {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
         {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
      ],
        }
        var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.listen('gettingData', function(index, item) {
        if (item.w < 1 || item.h < 1) { // unknown size
        var img = new Image(); 
        img.onload = function() { // will get size after load
        item.w = this.width; // set image width
        item.h = this.height; // set image height
           lightBox.invalidateCurrItems(); // reinit Items
           lightBox.updateSize(true); // reinit Items
        }
    img.src = item.src; // let's download image
    }
});

        lightBox.init();
      });
    });
  $('.tabs-nav li a').click(function(ev){
      ev.preventDefault();
      var tab_id = $(this).attr('href');
      $('.tabs-nav li a').removeClass('active');
      $('.tab-content').removeClass('active');
      $(this).addClass('active');
      $(tab_id).addClass('active');
    });
} )( jQuery );

Please let me know if this works.

https://zenofobe.com

[Don Wagner]

Wow - Thanks peejay! Yes, this worked perfectly. I really appreciate your documenting this fix. This was far beyond anything I could have figured out on my own.

[peejay]

A note about the Mega Menu

the file :- includes/templates/fluorspar/stylesheet_header_menu.css contains the rule :-

.level4 {display:none}

delete this if you want to display the next sub-level category.

Change to :-

.level3 {display:none}

If you want to hide all sub-categories.

https://zenofobe.com

[Don Wagner]

First let me say that the Fluorspar Template has been my #1 choice for my responsive rewrite project since the first time I first laid eyes on it. I am very happy with the look and feel. Now I seem to have written myself into a small corner here and if it is a true problem with misuse of the intent of the Fluorspar Template then I will just disable the particular option in question and proceed.

I am running a vastly simplified version of a ZC Store: Showcase with Prices - no Shopping Cart, no signup/log in, no shipping calculator, no inventory management and no Invoice/Payment function within ZC. (Buyer uses Contact link to get shipping quote, emailed invoice, etc.). So the bulk of my work in adapting a template is turning options off.

So anyway, link to New Products, which results in New Products pictured, works fine. However link to Home Page, which results in Categories, with New Products listed beneath, shows a Buy Now Shopping Cart Button for each New Product. I am guessing there is a simple condition that needs to be set somewhere - in fluorspar/new_product.php?

Thanks PeeJay - It's a minor nit and I am happy to just turn this feature off on the home page.

[peejay]

I am pleased to announce the release of Fluorspar ver 1.3.
Improvements have been made to the home page tabmenu using different javascript and a few css tricks.
The header menu now displays header EZ pages links.
The footer menu displays footer EZ pages links.
Some social media icons have been placed in the footer menu.
Photoswipe will now display enlarged images of different size in correct proportion.
Minor changes to css files to improve css buttons.

https://www.zenofobe.com

[Ingar]

Hello, just a small question. Doing some styling on the template pages can't find these icons pictures of home and login buttons in /* Navigation main */ to replace. The cart icons in images folder though. Where should I look into? Thanks.

[peejay]

Hello, just a small question. Doing some styling on the template pages can't find these icons pictures of home and login buttons in /* Navigation main */ to replace. The cart icons in images folder though. Where should I look into? Thanks.

The template uses Font Awesome icons (Ver 5), not images. These are located in file:-
includes/templates/fluorspar/common/tpl_header.php

<i class="fas fa-home fa-sm" title="Home"></i>
<i class="fas fa-user fa-sm" title="Account"></i>

you will need to replace these lines with something like this:-

<img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE,
$current_page_base,'images').HEADER_ICON_HOME ?>" alt="home icon" class="home-icon" title="Home" />

<img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE,
$current_page_base,'images').HEADER_ICON_LOGIN ?>" alt="login icon" class="login-icon" title="Account" />

Then open file :-
includes/languages/english/fluorspar/header.php
and define your images

// definiitions for header icons
define('HEADER_ICON_HOME', 'Your_file_name.png');
define('HEADER_ICON_LOGIN', 'Your_file_name.png');

Then place your images in :-
includes/templates/fluorspar/images/

Regards, Peejay

https://zenofobe.com