Template Fluorspar

[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.

[dbltoe]

I am assuming but, I take it your store status is set to 1? (My Store)

And, Categories - Always Show on Main Page to 0? (Layout Settings)

[peejay]

Template Fluorspar was designed to display buy now buttons on main page and currently there is now way to change this in admin.
To hide buy now button either:-

open file stylesheet_css_buttons.css and write span.normal_button.BUTTON_IMAGE_BUY_NOW {display:none}

or

copy file includes/modules/new_products.php and overwrite includes/modules/fluorspar/new_products.php

regards peejay
http://zenofobe.com

[Don Wagner]

I am assuming but, I take it your store status is set to 1? (My Store)

And, Categories - Always Show on Main Page to 0? (Layout Settings)

Store Status is: 2 = Showcase with Prices
Categories - Always Show on Main Page is: 1= On

[Don Wagner]

Thanks PeeJay! - I will do it that way. I am eternally grateful for your help.

[dbltoe]

Template Fluorspar was designed to display buy now buttons on main page and currently there is now way to change this in admin.

Perhaps it might be best to re-insert into the template code the controls provided by the database and the Admin menu choices. The whole idea of database driven is that, in setting a flag that the store is showcase only, there would never be an Add to Cart button. Apparently that is removed and the control moved to the stylesheet.

That was part of code to keep from having to set such important things in more than one spot. IMHO stylesheet use of display:none should be a last resort and used only when an override inclusion/exclusion cannot be accomplished.

Submitted as something to consider. You could modify the product_info code to have the button appear on the main page as well but, only if the person is authorized and the store is set to sell.

<!--bof Add to Cart Box --><?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
<?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
    if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
      // hide the quantity box and default to 1
      $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
    } else {
      // show the quantity box
      $the_button = '<div class="max-qty">' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '</div><span class="qty-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span><input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
    }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
?>
<?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
?>
          </div>
<?php   } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

[peejay]

Perhaps it might be best to re-insert into the template code the controls provided by the database and the Admin menu choices. The whole idea of database driven is that, in setting a flag that the store is showcase only, there would never be an Add to Cart button. Apparently that is removed and the control moved to the stylesheet.

I should have advised to just delete file:- includes/modules/fluorspar/new_products.php.
Then the template would use the core file includes/modules/new_products.php.
This file does not have any buttons, so I have not removed any code. The code used to display the BUY_NOW button
is from a mod found here :-https://www.zen-cart.com/downloads.php?do=file&id=998
Perhaps you could submit an improved version using your code.

Template Fluorspar does not use mobile_detect (I found it unreliable) and so relies heavily on {display:none} in css media queries.
I know I'm swimming against the tide with this but it seems to work alright.
Best not to use this template if you are not a fan of {display:none}.

Something to peruse:- https://www.quora.com/What-are-the-p...ttp-user-agent

peejay
http://zenofobe.com