I am building my e-commerce website and have chosen Spree for it. I am in need of having custom admin features other than what spree provides.
For example, I would like to have a new tab in the admin panel. In that panel I need to do some configuration.
Ex: A tab that will allow me to feature a specific product ( ex: cake of the week )
I went through the documentation. But couldn't find any such feature. Is it possible?
I am new to both Spree and Ruby. I come primarily from a PHP/.NET background. Ruby so far has surprised me and is cool.
Updates:
Deface seems to be the way to go for the operation as #gmacdougall suggested. I am still trying out Deface but have so far failed.
For a test, I am attempting to remove the nav tag and add <h1>Hello!</h1> instead.
Deface::Override.new(
:virtual_path => 'admin/shared/_menu',
:name => 'custom-admin-tab',
:replace => "nav",
#:partial => "spree/admin/shared/custom_tabs"
:text => '<h1>This is the new NAV</h1>'
)
Looking in to the console, I don't see any thing new happening when the following code is entered in app\overrides\custom-admin-tab.rb file.
But the interesting thing is, when I change the :virtual_path to :virtual_path => 'admin/shared/_tabs', Deface shows up and says there were no matches for 'tab'. I tried it with some other files but nothing showed up.
Am I doing some thing wrong?
You should check out the View Customization Guide for more information on how to add the tab in to the admin area. You can use the Deface gem to add the tab in to the Spree back end. You can provide your own controller and model which provides the functionality you want.
Spree is very customizable, and these sorts of customizations require a bit of work, but are very doable.
EDIT:
Using Spree 2-0-stable this override will override the nav:
Deface::Override.new(
:virtual_path => 'spree/layouts/admin',
:name => 'custom-admin-tab',
:replace => "nav#admin-menu",
:text => '<h1>This is the new NAV</h1>'
)
Related
In Drupal 8 -- I want to modify the basic-page content type to be able to support an "accordion field type"
I've seen the list field type - that can have unlimited fields -- but I am looking for a solution that can feature -- header/body - type features.
Drupal core sets you up well for your need--as it does several common UI requirements like accordions. You can reuse existing core assets pretty easily, and if this route meets your requirements, you'll get some admirable maintenance benefits from the fact that core gets more attention from the Drupal community than any given contrib module.
Two ways core could help:
you can invoke the jQuery UI Accordion that ships with core.
you can pattern something on the Toolbar Menu, which "Builds a nested accordion widget".
If the first option looks promising, the Examples module gives an example for how to use the core jQuery assets, specifically focusing on the accordion UI. (That's called serendipity incarnate!) Here's the javascript code:
(function ($) {
'use strict';
$(function () {
$('#accordion').accordion();
});
})(jQuery);
and here's the module code:
function js_example_theme() {
return [
'js_example_accordion' => [
'template' => 'accordion',
'variables' => ['title' => NULL],
],
];
}
Couldn't be easier. Note that if a custom module is less suited than adding the feature in your theme, you have either option available.
There is no module to handle this for you, the solution is to create unlimited Entity Reference in your content type, it must have two fields, Title and Body as you want, and to convert it to accordions you should customize new entity field theme and implement accordion there.
Another solution is, handle it by https://www.drupal.org/project/views_bootstrap which support accordion or https://www.drupal.org/project/faqfield module :
Features:
Configurable default text formats
Configurable answer widget
Types: Normal textareas, textfields and formatable textareas
Formatable textareas for any Wysiwyg editor
Configurable number of rows for textarea widget
Field formatters
jQuery Accordion UI
Simple themeable text
Definition list (HTML <dl>)
Anchor link list
Accordion display options
Choose first active question
Collapse open questions
Event to open/collapse questions (eg. mouseover, click)
I have two files in my project
index.html : contains 'app-container' where reactjs components mount
app.js : the file which has the react components
I want to use the facebook like and share button in my reactjs app. But I want them to appear only at certain points of time.
That is, I want to display them from reactjs's render() function, not permanently on my html page.
I proceeded the following way -
1.) I added the link to facebook javascript SDK on my index.html page.
2.) I added the code-plugin for like/share button in my render method.
<div class="fb-share-button" data-href="http://localhost:3000/game" id = "fbshare" data-layout="button_count"></div>
But the problem is that even though the components mount properly, like/share button are not visible.
Can anyone point out how I should proceed ?
Since class is a reserved word, React uses className. The below should solve your problem
<div className="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>
The problem is that it won't complain if you type class="", or anything else for that matter, like xlink:href="" or other unsupported attribute names. It will simply leave it out, and your share button won't get it's style, thus probably leaving it invisible on the page.
If you want to use unsupported attribute names, dangerouslySetInnerHTML is the way to go.
render: function() {
var html = '<div class="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>';
return (
< div dangerouslySetInnerHTML = {{__html: html}} />
);
}
If it still isn't working, it's probably because you are rendering the button after Facebook has finished parsing the page. In that case, you can use FB.XFBML.parse() in componentDidMount().
I have a collection_select. The list of possible values is getting long, so the UI becomes ugly. I'd prefer the style of combo box where I type to help find one the items in the list, instead of only having a giant popup menu. Searching for 'combobox' in rails seems to show me examples of what I already have.
%p
= f.label 'Reader'
= f.collection_select(:reader_id, Reader.order('name ASC'), :id, :name, { :include_blank => true })
To accomplish that, you will probably need to use a JavaScript library like typeahead.js or Kendo UI (to choose two out of probably dozens of examples). If I'm not mistaken Rails only uses the basic controls defined in HTML 4 & 5.
I'm helping somebody out and building a pretty simple app while learning Ember.js.
Eventually, this will be fed by an API, but the API is still in development, so I'm trying to figure out how to use Fixtures with Ember Data to manage a list of wines.
The jsfiddle is http://jsfiddle.net/YvmzN/5/
What I'm trying to do is that when a varietal is selected from the list, return a list of wines that match that varietal. However, I'm not getting any output. I get some very strange errors from web inspector in jsfiddle, but I don't get any errors locally, just no wines show up on the page.
I can't seem to figure out the flow, and I am unable to output console.log(this) from within my controller App.WineRoute.model, so I can't even tell if the controller is being triggered (I'm guessing it's not).
Can somebody guide me in what I'm doing wrong here, and maybe explain the structure of what's happenging in Ember and how you debug?
I thought it was supposed to go Router -> Route -> Controller -> Model -> Controller -> View, but I can't seem to track down the flow properly or see why this isn't working.
As mentioned in the JSfiddle, I'm currently pulling the list of wines from a local JSON file, in the long-run, I'll request the already filtered list from an API, but I'd still like to know how to do this at this point.
Here's a portion of the answer until you have more information:
In order to really use Ember Data properly each record needs to have an id.
App.Wine.FIXTURES =[
{
id:0,
winery:"something hills",
designation:"label name",
varietal:"Merlot"
},
{
id:1,
winery:"something stream",
designation:"label name 2",
varietal:"Merlot"
},
{
id:2,
winery:"something grape",
designation:"label name 3",
varietal:"Syrah"
}
];
Ember Data introduced a slew of changes between revision 13 and 1.0 beta. Here is an excellent read (from the developers explaining what should be done differently).
https://github.com/emberjs/data/blob/master/TRANSITION.md
The adapters are really pertinent, here's how you should define your adapter now
App.ApplicationAdapter= DS.FixtureAdapter;
I've done some major refactoring, and to be honest, I'm not very familiar with wine, so I might have some of the terminology wrong, or the relationships, but here's an example and a lot you can work off of.
http://jsfiddle.net/YvmzN/7/
And just as a fun side note, you don't hit the model hooks if you call transitionTo/transitionToRoute and provide the model necessary for the route. If you don't provide the model (or provide an id) it will hit the model hook in the applicable route (pretty sure there was an example of this, I say transition to wines, but only pass in the model for the variety, so it has the model for the variety resource, but not for the wines resource, so it hits the wines model hook).
I'm a beginner on Opencart and just started developing a module for Opencart which it must inject some lines of javascript and html code in these pages:
- Cart Page
- Product Page
- Confirmation Order Page
- Register form page
The official documentation doesn't have informations about how can i do that, I've tried to find a good documentation about OpenCart but I didn't find anything.
I need help. How can I do that?
Diggin necro topics;) :
The easiest way i think:
upload/catalog/view/theme/[themename]/template/product/product.tpl - here you can add your custom html for product page
[your theme name, you shouldnt overwrite default theme because it can cause damage after update]
It depends on where you're trying to insert the HTML/JavaScript.
Doing things the proper way in OpenCart, you're limited to the column-left, column-right, content-top, and content-bottom positions.
The files you'll need to create are:
admin/controller/module/mymodule.php
admin/language/english/module/mymodule.php
admin/view/template/module/mymodule.tpl
catalog/controller/module/mymodule.php
catalog/language/module/mymodule.php
catalog/view/theme/default/module/mymodule.php
To learn how to do this the first time, it's easiest to replicate an existing stock OpenCart module (preferably a simple one, such as information). Once you've replicated it you'll need to go through each of those files and replace any references to "information" with "mymodule".
After that, if you've done it properly, you should be able to navigate to Admin > Extensions > Modules and see your module in there. Then install it, use the "Add module" button to position the module on all the relevant layouts, hit save and hey presto you have a working module on the front-end.
To modify the front-end output, just edit catalog/view/theme/default/module/mymodule.php
If you want to insert your HTML somewhere other than the 4 available positions OpenCart gives you, position your module in the content-bottom position and use JavaScript/jQuery to inject some HTML where you want.
If this is for your own personal website then as Pawel S suggested it would be easiest to simply modify the relevant view files (ie. catalog/view/theme/[themename]/template/product/product.tpl), however if you're making a module which you plan to distribute then this should be a last resort.
Hope that helps!
I realize this is probably long dead by now, but if you're creating a module that needs to modify existing controllers, languages, models or views the correct tool to use is vQMod.
vQMod allows you to modify existing code on the fly using XML.
https://code.google.com/p/vqmod/